import React, { PureComponent } from 'react'
import { ScrollView, View, Text, StyleSheet } from 'react-native'
import HTMLView from 'react-native-htmlview';
import { BackIcon } from '../../widgets'
import screen from '../../utils/screen'
import color from '../../utils/color'

export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: '明细',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })

  render() {
    const d = this.props.navigation.state.params
    const title = d['title'] || ""
    const author = d['author'] || ""
    const createTime = d['createTime'] || ""
    const content = d['content'] || ""
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.title}>
            <Text style={{color: '#7b7b7b', fontSize: screen.pxToDp(30)}}>{title}</Text>
          </View>
          <View style={styles.tip}>
            <Text style={{color: '#7b7b7b', fontSize: screen.pxToDp(22)}}>{author} {createTime}</Text>
          </View>
          <View style={styles.content}>
            <HTMLView value={content}/>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    paddingHorizontal: screen.pxToDp(30),
    paddingVertical: screen.pxToDp(40)
  },
  content: {
    marginVertical: screen.pxToDp(50)
  }
})
